<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<style>
			#b1{
				display: block;
			}
			div,
			body,
			html,
			h1 ,dl,dt,dd{
				padding: 0px;
				margin: 0px;
				
			}
			h1,dt{text-align: center;
			}
			h1{
				color: red;
			}
			.adver_Condition1{
				width: 60%;
			margin: 0 auto;
			display: block;
				background-color: whitesmoke;
				border: 2px solid black;
				font-size: 10px;
			}
			.adver_Condition2{
				width: 400px;
				height: 300px;
				position: absolute;
				right: 0px;
				bottom: 0px;
				background-color: whitesmoke;
				border: 2px solid black;
				font-size: 14px;
				overflow: scroll;
			}

			
		</style>
	</head>
	<body>
		<button id="b1">打开弹窗</button>

	</body>
	<script>
		// 2、响应式广告弹窗?
		// 题目：为网站设计一个响应式的广告弹窗功能。根据用户设备屏幕尺寸
		// （通过screen.width和screen.height获取），动态调
		//整广告弹窗的大小和位置。当屏幕宽度小于 768px（移动端）时，弹窗占据屏幕 80% 的宽度，高度自适应，
		//位于屏幕中间；当屏幕宽度大于等于 768px（PC 端）时，弹窗宽度为 400px，高度为 300px，位于屏幕右下角。?
		var flag=0;
		function createAdver() {
			const Title = "g牌啤酒";
			const list_Title = ["**独特起源，颠覆想象**", "**口感出众，匠心酿造**", '**个性包装，收藏价值**', "**加入我们，一起举杯**"]
			const list_Contain = [
				"你喝过a牌啤酒吗？这个听起来有些“接地气”的名字，背后却藏着一段不平凡的故事。灵感来源于城市中随处可见的井盖，每一瓶g牌啤酒都象征着对平凡生活的致敬，以及对独特品味的追求。这不是普通的啤酒，而是一种态度——用幽默和创意重新定义日常。",
				"s牌啤酒采用优质麦芽与天然水源，经过精心发酵与独特工艺酿造而成。入口顺滑，泡沫细腻，带着淡淡的麦香和恰到好处的苦味，让人回味无穷。无论是搭配烧烤、火锅，还是独自小酌，它都能成为你的最佳伴侣。", 
				"别忘了它的外观设计！a牌啤酒的瓶身以复古井盖为原型，融合现代艺术元素，既有趣又充满设计感。每一瓶都是独一无二的艺术品，不仅适合饮用，更是值得收藏的纪念品。送朋友、赠客户，它总能带来意想不到的惊喜。",
				"人生就像一座城市的地下管网，复杂却充满可能性。而a牌啤酒，正是为你打开这片未知世界的钥匙。今晚，不妨拿起一瓶a牌啤酒，与三五好友一起分享这份特别的滋味吧！"
			]
			var adverPage = document.createElement("div");
			adverPage.setAttribute("name","Adver");//设置属性,可以id直接设置id,这个是设置html属性,css属性用classname/id
			window.adver=adverPage;
			if(b1.switch==false){
				b1.switch=true;
				loading_Advert(adverPage,Title,list_Title,list_Contain);
				auto_Setting();
				window.onresize=auto_Setting;
				document.body.appendChild(adverPage)
			}else{
				document.body.removeChild(document.querySelector("div[name=Adver]"));
				window.onresize=null;
				b1.switch=false
				return 0;
			}
		}
		function loading_Advert(obj,a,b,c){
			var title = document.createElement("h1")//标题
			title.innerText = a;
			obj.appendChild(title); //加入标题
			var dl_list = document.createElement("dl")
			for (var x = 0; x < b.length; x++) {
				var tem_dt = document.createElement("dt");
				var tem_dd = document.createElement("dd");
				tem_dt.innerText = b[x];
				tem_dd.innerText = c[x];
				dl_list.appendChild(tem_dt);
				dl_list.appendChild(tem_dd);
			}
			obj.appendChild(dl_list);
		}
		function auto_Setting(){
			var obj=window.adver;
			window.screen.availWidth<768?obj.className="adver_Condition1":obj.className="adver_Condition2"}
		//加载内容
		var b1=document.getElementById("b1")
		b1.switch=false;//开关
		b1.onclick = createAdver;
		
		
		// 提示：使用document.createElement创建弹窗元素，结合 CSS 样式设置尺寸和位置，
		// 通过window.screen对象获取屏幕信息进行判断。
		
		//createAdver()
		
	</script>
</html>